@import 'base';


nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font: 100% $font-stack;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}


.box {
    ul {
        @include transform(rotate(30deg));
    }
}


%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
    display: flex;
    flex-wrap: wrap;
}

.message {
    @extend %equal-heights;
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}


.container {
    width: 100%;
}

article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
}

aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
}


$lte-ie: true !default;

.clearfix {
    @if $lte-ie {
        *zoom: 1;
    }

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
        overflow: hidden;
    }
}